import { useEffect, useState } from "react";
import moment from "moment";
import http from '../utils/request'
import '../css/HomeList.css'
import { ArrowDown, Search, Arrow } from '@react-vant/icons';
import { Swiper, Popup, Area } from 'react-vant'
import { areaList } from '@vant/area-data'
import { useNavigate } from "react-router-dom";
import image1 from '../image/image.png'
import image2 from '../image/image2.png'
import image3 from '../image/image3.png'
import image4 from '../image/image4.png'
import image5 from '../image/image5.png'

const HomeList = () => {
  const navigate = useNavigate()
  // const [latitude, setLatitude] = useState<number | null>(null);
  // const [longitude, setLongitude] = useState<number | null>(null);
  // const [address, setAddress] = useState<string | null>(null);
  const [showCloseIcon, setShowCloseIcon] = useState<boolean>(false)
  const [posText, setPosText] = useState<string>('洪山区')
  const [doctorList, setDoctorList] = useState<Array<any>>([])
  const now = moment().format("HH:mm")
  const imgs = [
    {
      id: 1, src: 'https://cdn7.axureshop.com/demo/2214224/images/%E9%A6%96%E9%A1%B5/u297.png'
    },
    {
      id: 2, src: 'https://cdn7.axureshop.com/demo/2214224/images/%E9%A6%96%E9%A1%B5/u285.png'
    },
    {
      id: 3, src: 'https://cdn7.axureshop.com/demo/2214224/images/%E9%A6%96%E9%A1%B5/u288.png'
    },
    {
      id: 4, src: 'https://cdn7.axureshop.com/demo/2214224/images/%E9%A6%96%E9%A1%B5/u294.png'
    }
  ]
  const getDoctorList = () => {
    http.get('/doctor')
      .then((res: any) => {
        setDoctorList(res.data.doctorList)
        // console.log(res.data.doctorList);

      })
      .catch((err: any) => {
        console.log(err)
      })
  }

  // useEffect(() => {
  //   const convertToAddress = async () => {
  //     if (latitude && longitude) {        
  //       console.log(latitude, longitude);

  //       try {
  //         http.get('https://restapi.amap.com/v3/geocode/regeo', {
  //           params: {
  //             key: 'bcbe69ce9beefe4523d19a79592c68e6',
  //             location: '116.310003,39.991957',
  //             output: 'XML',
  //           }
  //         })
  //         .then(response => {
  //           const data = response.data;
  //           console.log(data);
  //           if (data.status === '1' && data.regeocode && data.regeocode.formatted_address) {
  //             console.log('Address:', data.regeocode.formatted_address);
  //           } else if (data.status === '0') {
  //             console.error('API request failed. Possible reasons: invalid API key, network issues, or wrong parameters.');
  //             if (data.info) {
  //               console.error('Additional information from API:', data.info);
  //             }
  //           } else {
  //             console.error('Invalid response from the API:', data);
  //           }
  //         })
  //         .catch(error => {
  //           console.error('Error fetching address:', error);
  //         });
  //       } catch (error) {
  //         console.error('Error fetching address:', error);
  //       }
  //     }
  //   };

  //   convertToAddress();
  // }, [latitude, longitude]);

  useEffect(() => {
    // if (navigator.geolocation) {
    //   navigator.geolocation.getCurrentPosition(
    //     (position) => {
    //       setLatitude(position.coords.latitude);
    //       setLongitude(position.coords.longitude);
    //       // console.log(position.coords.latitude, position.coords.longitude);
    //     },
    //     (error) => {
    //       console.error('Error occurred while getting location:', error);
    //     }
    //   );
    // } else {
    //   console.error('Geolocation is not supported by this browser.');
    // }
    getDoctorList()
  }, [])

  return (
    <>
      <Popup
        title="选择地区"
        visible={showCloseIcon}
        closeable
        style={{ height: '40%' }}
        position='bottom'
        onClose={() => setShowCloseIcon(false)}
      >
        <Area areaList={areaList} onConfirm={(v) => {
          setPosText(areaList.county_list[v[2]]);
          setShowCloseIcon(false);
        }} />
      </Popup>
      <div className="homeTop">
        <div>{now}</div>
        <img src={image1} alt="logo" />
      </div>
      <div className="homeListPos">
        <div className="homeListPosLeftItem">
          <h3 onClick={() => setShowCloseIcon(true)}>{posText}</h3>
          <ArrowDown style={{ fontSize: '13px', marginLeft: '5px' }} />
        </div>
        <div className="homeListPosRightItem">
          <Search />
        </div>
      </div>
      <Swiper autoplay={3000} loop={true} slideSize={80} trackOffset={10}>
        {
          imgs.map((item, index) => {
            return (
              <Swiper.Item key={index} onClick={() => {
                  navigate(`/lunbo?id=${item.id}`)
              }}>
                <img src={item.src} alt="logo" />
              </Swiper.Item>
            )
          })
        }
      </Swiper>
      <div className="homeListIcon">
        <div>
          <img src={image2} alt="jy" />
          <p>我要寄样</p>
        </div>
        <div>
          <img src={image3} alt="my" />
          <p>宠物美容</p>
        </div>
        <div>
          <img src={image4} alt="yl" />
          <p>宠物医疗</p>
        </div>
        <div>
          <img src={image5} alt="bk" />
          <p>知识百科</p>
        </div>
      </div>
      <div className="homeListDoctorTitle">
        <h2>热门宠物师</h2>
        <div>
          <span>查看全部</span>
          <Arrow />
        </div>
      </div>
      <div className="homeListDoctor">
        {
          doctorList.map((item: any, index: number) => {
            return (
              <div key={index} className="homeListDoctorItem" onClick={()=>{
                navigate(`/doctorDetails?id=${ item._id }`)
              }}>
                <img src={item.src} alt="" />
                <p><b>{item.name}</b></p>
                <p style={{ color: '#999', fontSize: '13px' }}>{item.denJi}</p>
                <p style={{ color: '#999', fontSize: '13px' }}>{item.conYe}</p>
              </div>
            )
          })
        }
      </div>
      <div className="homeListDoctorTitle" style={{ marginTop: '10px' }}>
        <h2>每日小科普</h2>
      </div>
      <div className="homeListDayKp" onClick={()=>navigate('/daykp')}>
        <img src="https://cdn8.axureshop.com/demo/2214224/images/%E9%A6%96%E9%A1%B5/5_u306.png" alt="" width={'100%'} height={200} />
        <h3>母猫什么时候做绝育比较好？</h3>
      </div>
      <p style={{ color: '#999', fontSize: '13px', marginTop: '30px', marginBottom: '100px', marginLeft: '10%' }}>- - - - - - - - - - - - - - - - 我是有底线的 - - - - - - - - - - - - - - - -</p>
    </>
  );
}

export default HomeList;